<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabbed 标签页 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-xl-6">
            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-1-1" role="tab">
                                    简介
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-1-2" role="tab">
                                    安装
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-1-3" role="tab">
                                    关于
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-1-1">
                            <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                            <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于
                                jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-1-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-1-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            小尺寸按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills nav-pills-sm" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-6-1" role="tab">
                                    简介
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-6-2" role="tab">
                                    安装
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-6-3" role="tab">
                                    关于
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-6-1">
                            <p>你可以在<code>ul.nav</code>上添加<code>.nav-pills-sm</code>设置标签页使用小尺寸按钮</p>
                        </div>
                        <div class="tab-pane" id="card-tab-6-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-6-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            悬浮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills nav-pills-sm nav-tabs-btn" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-5-1" role="tab">
                                    简介
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-5-2" role="tab">
                                    安装
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#card-tab-5-3" role="tab">
                                    关于
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-5-1">
                            <p>你可以在<code>ul.nav</code>上添加<code>.nav-tabs-btn</code>设置标签页使用悬浮效果</p>
                        </div>
                        <div class="tab-pane" id="card-tab-5-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-5-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
        </div>
        <div class="col-xl-6">
            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用图标 + 状态色 <small>使用Lineawesome图标</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills nav-pills-danger"
                            role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-2-1" role="tab">
                                    <i class="la la-bars"></i>
                                    简介
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                                   aria-haspopup="true" aria-expanded="true"><i class="la la-cube"></i> 更多</a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-2-1">简介</a>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-2-2">安装</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-2-3">关于</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-2-1">
                            <p>你可以在<code>ul.nav</code>上添加<code>.nav-pills-*</code>
                                （<code>success、info、warning、danger、brand、light、dark、primary、invalid、secondary</code>）设置标签页使用不同的状态色</p>
                        </div>
                        <div class="tab-pane" id="card-tab-2-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-2-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用图标 + 浅色状态色 <small>使用Fontawesome图标</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills nav-pills-label-brand"
                            role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-3-1" role="tab">
                                    <i class="fa fa-bars"></i>
                                    简介
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                                   aria-haspopup="true" aria-expanded="true"><i class="fa fa-cog"></i> 更多</a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-3-1">简介</a>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-3-2">安装</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-3-3">关于</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-3-1">
                            <p>你可以在<code>ul.nav</code>上添加<code>.nav-pills-label-*</code>
                                （<code>success、info、warning、danger、brand、light、dark、primary、invalid、secondary</code>）设置标签页使用不同的状态色</p>
                        </div>
                        <div class="tab-pane" id="card-tab-3-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-3-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--tabs">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            标签页 <small>使用Flaticon图标</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <ul class="nav nav-pills" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#card-tab-4-1" role="tab">
                                    <i class="flaticon-gift"></i>
                                    简介
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                                   aria-haspopup="true" aria-expanded="true"><i class="flaticon-squares"></i> 更多</a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-4-1">简介</a>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-4-2">安装</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" data-toggle="tab" href="#card-tab-4-3">关于</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="card-tab-4-1">
                            <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                            <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于
                                jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-4-2">
                            <p>通过 Bower、Composer、Meteor 或者 npm 可以将 bootstrap 的 Sass 和 JavaScript 源码下载到本地。这些包管理工具所下载的
                                Bootstrap 文件中不包括文档，但是包含了完整的编译系统和说明文件。</p>
                        </div>
                        <div class="tab-pane" id="card-tab-4-3">
                            <p>
                                Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>